{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>全部分类</title>
<style type="text/css">
    .mui-content{ background-color: #f5f5f5;}
    .mui-row.mui-fullscreen>[class*="mui-col-"] {
        height: 100%;
    }
    .mui-col-xs-3,
    .mui-col-xs-9 {
        overflow-y: auto;
        height: 100%;
    }
    .mui-segmented-control .mui-control-item {
        line-height: 50px;
        width: 100%;
    }
    .mui-control-content {
        display: block;
    }
    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        background-color: #fff;
    }
    .mui-table-view .mui-media-object{
        max-width:42px;
        min-width:42px;
    }
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<!--全部分类-->
<div class="mui-content mui-row mui-fullscreen">
    <div class="mui-col-xs-3">
        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical mb-left-nav">
            {%for item in data%}

            <a class="mui-control-item xw-border-bottom" data-index="{{loop.index0}}" data-id="{{item.id}}" href="#content{{loop.index}}">{{item.name}}</a>

            {%endfor%}
        </div>
    </div>
    <div id="segmentedControlContents" class="mui-col-xs-9">
        {%for item in data%}
        <div id="content{{loop.index}}" class="mui-control-content">
            <h4 class="bbs-fl-title">{{item.name}}</h4>
            <ul class="mui-table-view mui-table-view-chevron">
                {% for item2 in item.forumDTOs %}
                <li class="mui-table-view-cell mui-media">
                    <a href="bbscont?id={{item2.id}}">
                        <div class="mui-media-body">
                            <img class="mui-media-object mui-pull-left" src="{{ctx.app.config.api.image}}/{{item2.icon}}"/>
                            {{item2.name}}
                            <p class="mui-ellipsis"><span>人气:{{item2.browseCount}} </span> <span> 帖子:{{item2.postCount}}</span></p>
                        </div>
                    </a>
                    {%if item2.collectionId == ''%}
                    <input class="mui-btn" type="button" onclick="js_yes(this)"   data-id="{{item2.id}}" name="jion" value="关注"  />
                    {%else%}
                    <input class="mui-btn" style="background: #e5e5e5;padding: 6px 5px;" type="button" data-id="{{item2.collectionId}}" data-cid="{{item2.collectionId}}" onclick="js_del(this)" name="jion" value="已关注"  />
                    {%endif%}
                </li>
                {%endfor%}
            </ul>
        </div>
        {%endfor%}
    </div>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    var controls = document.getElementById("segmentedControls");
    var contents = document.getElementById("segmentedControlContents");
    controls.querySelector('.mui-control-item').classList.add('mui-active');
    (function() {
        var controlsElem = document.getElementById("segmentedControls");
        var contentsElem = document.getElementById("segmentedControlContents");
        var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
        var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
        var controlWrapperElem = controlsElem.parentNode;
        var controlWrapperHeight = controlWrapperElem.offsetHeight;
        var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight;//左侧类别最大可滚动高度
        var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight;//右侧内容最大可滚动高度
        var controlHeight = controlListElem[0].offsetHeight;//左侧类别每一项的高度
        var controlTops = []; //存储control的scrollTop值
        var contentTops = [0]; //存储content的scrollTop值
        var length = contentListElem.length;
        for (var i = 0; i < length; i++) {
            controlTops.push(controlListElem[i].offsetTop + controlHeight);
        }
        for (var i = 1; i < length; i++) {
            var offsetTop = contentListElem[i].offsetTop;
            if (offsetTop + 100 >= maxScroll) {
                var height = Math.max(offsetTop + 100 - maxScroll, 100);
                var totalHeight = 0;
                var heights = [];
                for (var j = i; j < length; j++) {
                    var offsetHeight = contentListElem[j].offsetHeight;
                    totalHeight += offsetHeight;
                    heights.push(totalHeight);
                }
                for (var m = 0, len = heights.length; m < len; m++) {
                    contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
                }
                break;
            } else {
                contentTops.push(parseInt(offsetTop));
            }
        }
        contentsElem.addEventListener('scroll', function() {
            var scrollTop = contentsElem.scrollTop;
            for (var i = 0; i < length; i++) {
                var offsetTop = contentTops[i];
                var offset = Math.abs(offsetTop - scrollTop);
                //						console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);
                if (scrollTop < offsetTop) {
                    if (scrollTop >= maxScroll) {
                        onScroll(length - 1);
                    } else {
                        onScroll(i - 1);
                    }
                    break;
                } else if (offset < 20) {
                    onScroll(i);
                    break;
                }else if(scrollTop >= maxScroll){
                    onScroll(length - 1);
                    break;
                }
            }
        });
        var lastIndex = 0;
        //监听content滚动
        var onScroll = function(index) {
            if (lastIndex !== index) {
                lastIndex = index;
                var lastActiveElem = controlsElem.querySelector('.mui-active');
                lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
                var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
                currentElem.classList.add('mui-active');
                //简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
                var controlScrollTop = controlWrapperElem.scrollTop;
                if (controlScrollTop + controlWrapperHeight < controlTops[index]) {
                    controlWrapperElem.scrollTop = controlMaxScroll;
                } else if (controlScrollTop > controlTops[index] - controlHeight) {
                    controlWrapperElem.scrollTop = 0;
                }
            }
        };
        //滚动到指定content
        var scrollTo = function(index) {
            contentsElem.scrollTop = contentTops[index];
        };
        mui(controlsElem).on('tap', '.mui-control-item', function(e) {
            scrollTo(this.getAttribute('data-index'));
            return false;
        });
    })();

    function js_yes(e){
        var id = $(e).context['dataset']['id'];
        mui.post('/setcollect', {
            type:1,
            domainId:id,
            },function(data){
                if(data.code!=200){

                }else{
                    $(e).val("已关注");
                    $(e).attr("style","background: #e5e5e5;padding: 6px 5px;");
                    $(e).attr("onclick","js_del(this)");
                    $(e).context['dataset']['cid'] = data.data;
                }
            },'json'
        );
    }

    function js_del(e){
        var id = $(e).context['dataset']['cid'];
        mui.post('/delcollect', {
            collectionIds:id,
            },function(data){
                if(data.code!=200){

                }else{
                    $(e).val("关注");
                    $(e).attr("style"," ");
                    $(e).attr("onclick","js_yes(this)");
                }
            },'json'
        );
    }

</script>
<!--flotdemo-->
{% endblock %}
